const path = require('path');

// 自动生成html,在body尾部插入js,头部header插入css
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 构建前清理dist
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');
// 打包体积分析
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const webpack = require('webpack');

let config = {
    devServer: {
        port: 8000, // 端口号
        host: 'localhost', // 主机名，设为该值可通过IP访问
        overlay: {
            errors: true // 错误提示
        },
        hot: true
    },
    devtool: 'inline-source-map', // 加入devtool配置
    mode: 'none',
    entry: {
        main: path.join(__dirname, './src/main.js')
    },
    output: {
        filename: '[name].bundle.js',
        path: path.join(__dirname, './dist')
    },
    module: {
        rules: [{
            test: /.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        }, {
            test: /.(jpg|jpeg|png|gif|svg)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    name: '[name]-[hash:5].ext',
                    limit: 1024
                }
            }]
        }, {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        }]
    },
    optimization: {
        splitChunks: {
            chunks: 'initial',
            automaticNameDelimiter: '.',
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: 1
                }
            }
        },
        runtimeChunk: {
            name: entrypoint => `manifest.${entrypoint.name}`
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, './index.html'),
            inject: true,
            minify: {
                removeComments: true
            }
        }),
        new CleanWebpackPlugin(),
        // 模块热替换
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
        // new BundleAnalyzerPlugin()
    ]
};

module.exports = config;
